﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>service</title>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global_color.css"/>
    <script src="../styles/jquery-3.3.1.js"></script>
    <script language="javascript" type="text/javascript">

        $(function () {
            $.ajax({
                type: "GET",
                url: "/serviceController/cost",
                data: "JSON",
                success: function (data) {
                    var select = $('#cost');
                    for (const item of  data) {
                        var option = $('<option></option>').text(item.name);

                        option.attr("value", item.costId);
                        select.append(option);
                        //不能用appendChild
                        //select 跟 input一样 写个name 才能进入表单
                    }
                }
            })


        });

        //保存成功的提示信息
        function showResult() {
            // showResultDiv(true);
            // window.setTimeout("showResultDiv(false);", 3000);

            // $("form[name=form_add]").submit();
            document.form_add.submit();//提交表单

        }

        function showResultDiv(flag) {
            var divResult = document.getElementById("save_result_info");
            if (flag)
                divResult.style.display = "block";
            else
                divResult.style.display = "none";
        }

        var superId = 0;

        //声明一个全局变量
        function OnPropChanged(event) {
            superId = event.target.value
            // .validate
            console.log(superId);

            //监测变化
        }

        //自动查询账务账号
        function searchAccounts() {
            // document.getElementById("a1").innerHTML = txtObj.value;
            var idcardNo = superId;

            console.log(idcardNo);

            var data = {
                "idcardNo": idcardNo
            };

            var setting = ({
                //get请求没有请求体
                type: "POST",
                url: "/serviceController/account",
                headers:{
                    'Content-Type': 'application/json'
                },
                data:JSON.stringify(data)
            })

            $.ajax(setting).done(function (resp) {
                let id = resp.accountId;
                // if (id != null) {
                //     alert("查询成功！请继续操作。");
                //     return true;
                // } else {
                //     return false;
                // }
                var input = $('#aId').val(resp.accountId)
                input.text(input);
                console.log(resp.accountId);
                var input = $('#aId');
                console.log(input);
                input.val(resp.accountId);
                accountId = resp.accountId;

            });
        }

        // function searchAccounts() {
        //     var superId = 0;
        //     $.ajax({
        //         type: "POST",
        //         url: ""
        //     })
        // }

    </script>


</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="<%=request.getContextPath()%>/admins/exit">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <c:import url="../navigation.jsp"/>
    <script>
        var li = document.getElementById("menu").children;
        var title = document.getElementsByTagName('title')[0].textContent;
        for (let i = 0; i < li.length; i++) {
            if (li[i].children[0].className.startsWith(title)){
                li[i].children[0].className = title + '_on';
            }
        }
    </script>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <!--保存操作的提示信息-->
    <div id="save_result_info" class="save_fail">保存失败！192.168.0.23服务器上已经开通过 OS 账号 “mary”。</div>
    <form action="<%=request.getContextPath()%>/serviceController/add" method="post" class="main_form" name="form_add">
        <!--内容项-->
        <div class="text_info clearfix"><span>身份证：</span></div>
        <div class="input_info">
            <input onchange="OnPropChanged (event)" id="idcard" type="text" name="idcard_no" class="width180"/>
            <input type="button" value="查询账务账号" class="btn_search_large"
                   onclick="searchAccounts()"/>
            <span class="required">*</span>
            <!--<div class="validate_msg_short">没有此身份证号，请重新录入。</div>-->
        </div>
        <div class="text_info clearfix"><span>账务账号：</span></div>
        <div class="input_info">
            <input id="aId" type="text" name="accountId" onkeyup="searchAccounts(this);"/>
            <span class="required">*</span>
            <!--<div class="validate_msg_long">没有此账务账号，请重新录入。</div>-->
        </div>
        <div class="text_info clearfix"><span>资费类型：</span></div>
        <div class="input_info">
            <select id="cost" name="costId">
                <!--<option id="11">包 20 小时</option>-->
                <!--<option>包 40 小时</option>-->
                <!--<option>包 60 小时</option>-->
                <!--<option>包月</option>-->
            </select>
        </div>
        <div class="text_info clearfix"><span>服务器 IP：</span></div>
        <div class="input_info">
            <input type="text" name="unixHost"/>
            <span class="required">*</span>
            <!--<div class="validate_msg_long">15 长度，符合IP的地址规范</div>-->
        </div>
        <div class="text_info clearfix"><span>登录 OS 账号：</span></div>
        <div class="input_info">
            <input type="text" name="osUsername"/>
            <span class="required">*</span>
            <!--<div class="validate_msg_long">8长度以内的字母、数字和下划线的组合</div>-->
        </div>
        <div class="text_info clearfix"><span>密码：</span></div>
        <div class="input_info">
            <input type="password" name="loginPasswd"/>
            <span class="required">*</span>
            <!--<div class="validate_msg_long">30长度以内的字母、数字和下划线的组合</div>-->
        </div>
        <div class="text_info clearfix"><span>重复密码：</span></div>
        <div class="input_info">
            <input type="password" name="repeatPasswd"/>
            <span class="required">*</span>
            <!--<div class="validate_msg_long">两次密码必须相同</div>-->
        </div>
        <!--操作按钮-->
        <div class="button_info clearfix">
            <input type="button" value="保存" class="btn_save" onclick="showResult()"/>
            <input type="button" value="取消" class="btn_save"
                   onclick="javascript:window.location.href='<%=request.getContextPath()%>/serviceController/findByPage'"/>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
    <br/>
    <span>版权所有(C)云科技有限公司 </span>
</div>
</body>
</html>
